<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>上传食谱</title>
		<link rel="stylesheet" href="css/best_recipe.css" />
		<link rel="stylesheet" href="css/view_recipes.css" />
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="layer/skin/layer.css" />
		<style>
			body {
				background: #edeeec;
			}
			
			p {
				margin: 0;
			}
			
			.slide_container {
				overflow-x: auto;
				overflow-y: hidden;
			}
			
			.slide_container li {
				display: none;
			}
			
			.tap_active {
				display: block !important;
			}
			.cont img{
				height: 18px;
			}
		</style>
	</head>

	<body>
		<header>
			<div class="header">
				<span class="title">上传食谱</span>
				<span class="search"></span>
			</div>
		</header>
		<div class="top"></div>
		<div class="cooker">
			<div class="cooker_news">
				<div class="cooker_into">
					<span class="font_id">ID</span>
					<span class="cooker_name">张某某</span>
				</div>
				<div class="cooker_eva">
					<span class="eva_title">成长经验</span>
					<div class="eva_group">
						<span class="eva_icon active"></span>
						<span class="eva_icon active"></span>
						<span class="eva_icon"></span>
						<span class="eva_icon"></span>
						<span class="eva_icon"></span>
						<span class="eva_icon"></span>
					</div>
				</div>
				<div class="blank"></div>
				<div class="cooker_img"></div>
			</div>
			<div class="blank"></div>
		</div>
		<div class="container_tap">
			<div class="slide_go">
				<span class="slide_go_icon"></span>
				<span class="slide_name">滑动进入下一步</span>
			</div>
			<div class="slide_container">
				<ul>
					<li class="tap_active">
						<div class="slide_item">
							<div class="search_input">
								<input type="text" placeholder="食谱名称" id="recip_name" />
								<select required class="form-control-select-from select_mode" name="channel" id="mode_select">
									<option value="1">烘焙</option>
									<option value="2">甜品&饮料</option>
									<option value="3">汤、粥</option>
									<option value="4">主食</option>
									<option value="1">烘焙</option>
									<option value="2">甜品&饮料</option>
									<option value="3">汤、粥</option>
									<option value="4">主食</option>
								</select>
							</div>
							<div class="checked_have">
								<div class="checked">
									<span class="checked_out">
							<span>有成品食谱图</span>
									<span class="checked_icon"><span class="ck ck_active" id="ck_have"></span></span>
									</span>
								</div>
								<div class="checked">
									<span class="checked_out">
							<span>无成品食谱图</span>
									<span class="checked_icon"><span class="ck" id="ck_no"></span></span>
									</span>
								</div>
								<div class="blank"></div>
							</div>
							<div class="upload_img">
								<input type="file" name="recips_img" accept="image/*;capture=camera" id="recips_img" onchange="recips_img(this)" style="display: none;">
								<img src="" alt="食谱图" style="width: 100%;height: 100%;border-radius: 15px;display: none;" id="view_recip" />
								<div class="upload_img_inner" id="pt_recips">
									<span class="upload_icon"></span>
								</div>
							</div>
						</div>
						<input type="file" name="shiputu" id="shiputu" accept="image/*;capture=camera" value="" style="display: none;">
						<div class="upload_sample" style="text-align: center;padding: 20px 0;">
							<img src="images/new/shili@2x.png" style="width: 40px;" id="sample" />
							<span style="display: block;font-weight: bolder;color: #333333;margin-top: 5px;">食谱上传规范</span>
						</div>
					</li>
					<li>
						<div class="add_ingredients">
							<div class="add_top">
								<div class="add_item">
									食材
								</div>
								<div class="blank"></div>
							</div>
							<div class="integred_group">
								<table border="1">
									<tbody>
										<tr>
											<td>
												<input type="text" placeholder="添加食材" class="shicai_easy" />
											</td>
											<td>
												<span class="danwei">
												<input type="text" placeholder="数量..." class="shuliang_easy" />
												<select required class="form-control-select-from danwei_select">
										            <option value="1">mg</option>
										            <option value="2">g</option>
										            <option value="3">kg</option>
										        </select>
												</span>
											</td>
											<td>
												<input type="text" placeholder="备注(小贴士)..." class="beizhu_easy" />
											</td>
										</tr>
									</tbody>
								</table>
								<div class="add_line">
									<span class="add_big_icon">添加一行...</span>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="add_ingredients">
							<div class="add_top">
								<div class="add_item">
									做法
								</div>
								<div class="blank"></div>
							</div>
							<div class="add_taps">
								<div class="taps_top" id="es_tp">
									<div class="insert_title">点击下方图标插入食谱</div>
								</div>
								<div class="choose_tap">
									<div class="choose_item" li="<img src='images/new/2.png' style='width: 11px;' />">
										<img src="images/best_recipe/2.png" style="width: 20px;" />
									</div>
									<div class="choose_item" li="<img src='images/new/1.png' style='width: 11px;' />">
										<img src="images/best_recipe/1.png" style="width: 20px;" />
									</div>
									<div class="choose_item" li="<img src='images/new/4.png' style='height: 11px;'/>">
										<img src="images/best_recipe/4.png" style="height: 25px;" />
									</div>
									<div class="choose_item" style="text-indent: 3px;" li="Varoma">
										Varoma
									</div>
									<div class="blank"></div>
								</div>
								<div class="taps_content">
									<div id="buzhou_easy_dl" class="tp">
										<div class="tt">
											<div class="insert">
												<span class="buzhou_index">1.</span>
												<div class="cont cat" id="cat" contenteditable="true"></div>
												<img src="images/new/add_camera@2x.png" class="pt" />
												<input type="file" accept="image/*;capture=camera" class="tap_pto" onchange="tap_pto(this)" style="display: none;">
												<div class='blank'></div>
											</div>
										</div>
									</div>
									<div class="add_line" style="margin-top: 0;">
										<span class="add_big_icon2" id="add_buzhou_easy">添加步骤...</span>
									</div>
								</div>
							</div>
							<div class="search_input" style="margin-top: 20px;">
								<input type="text" id="yaojue" />
								<span class="select_mode" style="width: 70px;"><span id="code">要决</span></span>
							</div>
							<div class="taps_submit" id="submit_easy">点击上传食谱</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="bg"></div>
		<div class="footer_help"></div>
		<footer>
			<div class="footer_container">
				<div class="footer_item">
					<div class="item_inner">
						<a href="jacascript:void(0)">
							<span class="home_icon"></span>
							<span class="footer_name">主页</span>
						</a>
					</div>
				</div>
				<div class="footer_item">
					<div class="item_inner2">
						<a href="javascript:void(0)">
							<span class="add_icon"></span>
						</a>
					</div>
				</div>
				<div class="footer_item">
					<div class="item_inner3">
						<a href="jacascript:void(0)">
							<span class="mine_icon"></span>
							<span class="footer_name">我的食谱</span>
						</a>
					</div>
				</div>
				<div class="blank"></div>
			</div>
		</footer>
		<div style='z-index: 10000;' id="sample_mask">
			<span class="guanbi"></span>
		</div>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/select.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="layer/layer.js"></script>
		<script>
			var swiper;
			$(function() {
					swiper = new Swiper('.swiper-container');
					$('.cont').focus();
				})
				/*有无成品食谱图点击check*/
			$('.checked_icon').click(function() {
				$('.ck').removeClass('ck_active');
				$(this).children('span').toggleClass('ck_active');
				$('.upload_img').toggle();
			})

			/*点击查看食谱上传规范*/
			$('#sample').click(function() {
				var width = document.body.offsetWidth;
				var height = width*1.77;
				$('#sample_mask').css('height',height+'px');
				$('#sample_mask').css('background-size','100%');
				$("#sample_mask").show();
				$('#sample_mask').click(function() {
					$("#sample_mask").hide();
				})
			})

			/*添加一行*/
			$('.add_big_icon').click(function() {
				var x = 0;
				$('.integred_group tr').each(function(i) {
					var shicai = $.trim($(this).find('.shicai_easy').val());
					if(shicai == '') {
						x = 1;
					}
				})
				if(x == 1) {
					layer.msg('请确定食材是否填写', {
						icon: 7
					});
					return false;
				}
				var tr = "<tr><td><input type='text' placeholder='添加食材' class='shicai_easy'/></td><td><span class='danwei'><input type='text' placeholder='数量...' class='shuliang_easy' /><select required class='form-control-select-from danwei_select'><option value='1'>mg</option><option value='2'>g</option><option value='3'>kg</option></select></span></td><td><input type='text' placeholder='备注(小贴士)...' class='beizhu_easy'/></td></tr>";
				$('.integred_group table').append(tr);
			})

			/*简单添加步骤*/
			var easy_index = 1;
			$("#add_buzhou_easy").click(function() {
				var i = 0;
				$('.tt').each(function() {
					if($(this).find('.cont').html() == '' && $(this).find('input').val() == '') {
						i = 1;
					}
				})
				if(i == 1) {
					layer.msg('请先完成当前步骤', {
						icon: 7
					});
					return false;
				}
				var htmlArr = [];
				htmlArr.push("<div class='tt'><div class='insert'><span class='buzhou_index'>" + (++easy_index) + ".</span><div class='cont cat' contenteditable='true'></div><img src='images/new/add_camera@2x.png' class='pt' /><input type='file' accept='image/*;capture=camera' class='tap_pto' onchange='tap_pto(this)' style='display: none;'><div class='blank'></div></div></div>");
				htmlArr.join("");
				$("#buzhou_easy_dl").append(htmlArr);
				$('.pt').click(function() {
					$(this).next('input').click();
					$(this).addClass('photo_now');
				})
				$('.cont:not(.cont:last)').removeClass('cat');
			})

			$('.choose_item').mousedown(function(e){
                var htmlText = $(this).attr('li');
                var sel = document.selection;
                if (sel) {
                    var textRange = sel.createRange();
                    document.execCommand('insertHtml', false, htmlText);
                    textRange.collapse(false);
                    textRange.select();
                } else {
                    document.execCommand('insertHtml', false, htmlText);
                }
                e.preventDefault();
            });
			
		</script>

		<script>
			/*上传简单*/
			$('#pt_recips').click(function() {
				$('#recips_img').click();
			})

			/*验证是否为图片*/
			function checkType(file) {
				var i = false;
				var path = file.value.toString();
				var perfix = path.substring(path.indexOf('.') + 1);
				var regexp = /(jpg|jpeg|png)/gi;
				if(perfix.match(regexp)) {
					i = true;
				} else {

				}
				return i;
			}

			function recips_img(file) {
				if(!checkType(file)) {
					$('#recips_img').val('');
					layer.msg('请上传图片文件', {
						icon: 7
					});
					return false;
				}
				var file = file.files[0];
				var r = new FileReader();
				r.readAsDataURL(file);
				$(r).load(function() {
					$("#view_recip").attr('src', this.result);
					$("#view_recip").show();
				});
			}

			/*点击上传步骤图-简单*/
			$('.pt').click(function() {
				$(this).parent('.insert').find('.tap_pto').click();
				$(this).addClass('photo_now');
			})

			function tap_pto(file) {
				if(!checkType(file)) {
					$('.photo_now').attr('src', 'images/new/add_camera@2x.png');
					$(file).val('');
					$('.pt').removeClass('photo_now');
					layer.msg('请上传图片文件', {
						icon: 7
					});
					return false;
				}
				var file = file.files[0];
				var r = new FileReader();
				r.readAsDataURL(file);
				$(r).load(function() {
					$('.photo_now').attr('src', this.result);
					$('.pt').removeClass('photo_now');
				});
			}
			/*点击插入图标*/
			/*$('.choose_item').click(function() {
				var text = $(this).attr('li');
				var value = $('.tt:last-of-type .insert .cont').html();
				$('.tt:last-of-type .insert .cont').html(value + text);
			})*/

			/*上传总-简单*/
			$("#submit_easy").click(function() {
				var form = new FormData();
				/*食谱名称*/
				var recip_name = $.trim($('#recip_name').val());
				if(recip_name == '') {
					layer.msg('请填写食谱名称', {
						icon: 7
					});
					return false;
				}
				var code = $('#mode_select select option:selected').text();
				var recip_img;
				if($('#ck_have').hasClass('ck_active')) {
					recip_img = $('#recips_img').prop('files')[0];
				} else {
					recip_img = 0;
				}
				/*食材*/
				var tbArr = [];
				var s = 0;
				$('.integred_group tr').each(function(i) {
					var trArr = [];
					var shicai = $(this).find('.shicai_easy').val();
					var beizhu = $(this).find('.beizhu_easy').val();
					var numb = $(this).find('.danwei input').val();
					var danwei = $.trim(numb) + $(this).find('.danwei select option:selected').text();
					if(shicai == '') {
						s = 1;
					}
					trArr.push(shicai);
					trArr.push(beizhu);
					trArr.push(danwei);
					tbArr.push(trArr);
				})
				if(s == 1) {
					layer.msg('查看食材名称是否填写', {
						icon: 7
					});
					return false;
				}

				/*步骤*/
				var tap_pto, tap_content;
				var tapArr = [];
				var b;
				$('#buzhou_easy_dl .tt').each(function(i) {
					tap_pto = $(this).find('.tap_pto').get(0).files[0];
					form.append('img' + (++i), tap_pto);
					var tp = $(this).find('.tap_pto').val();
					tap_content = $(this).find('.cont').html();
					if(tp == '' && tap_content == '') {
						b = 1;
					}
					tapArr.push(tap_content);

				})
				if(b == 1) {
					layer.msg('步骤是否填写完整', {
						icon: 7
					});
					return false;
				}
				var im_tips = $.trim($('#yaojue').val());
				layer.load();
				/*食谱名*/
				form.append('recip_name', recip_name);
				/*类别*/
				form.append('code', code);
				/*食谱图*/
				form.append('recips_img', recip_img);
				/*食材list*/
				form.append('tbArr', tbArr.join(';'));
				/*步骤list*/
				form.append('tapArr', tapArr.join(';'));
				/*要诀*/
				form.append('im_tips', im_tips);
				$.ajax({
					type: "post",
					url: "1",
					data: form,
					dataType: 'json',
					async: false,
					cache: false,
					contentType: false,
					processData: false,
					success: function(data) {
						layer.closeAll();

					},
					error: function(e) {
						layer.closeAll();

					}
				});
			})

			function tap_change() {
				var nStartY, nStartX, nChangY, nChangX;
				document.getElementsByClassName('container_tap')[0].addEventListener('touchstart', function(e) {
					nStartY = e.targetTouches[0].pageY;
					nStartX = e.targetTouches[0].pageX;
				});
				document.getElementsByClassName('container_tap')[0].addEventListener('touchend', function(e) {
					nChangY = e.changedTouches[0].pageY;
					nChangX = e.changedTouches[0].pageX;
					if((nChangX - nStartX) < -60) {
						$('.slide_container li').each(function(i) {
							if($(this).hasClass('tap_active')) {
								var index = i + 1;
								if(index > 2) {
									/*$('.slide_container li').removeClass('tap_active');
									 $('.slide_container li:nth-of-type(1)').addClass('tap_active');
									 return false;*/
								} else {
									$('.slide_container li').removeClass('tap_active');
									$('.slide_container li:nth-of-type(' + (index + 1) + ')').addClass('tap_active');
									$('.slide_container li:nth-of-type(' + (index + 1) + ') input').focus();
									$('.cont').focus();
									return false;
								}
							}
						})
					}
					if((nChangX - nStartX) > 60) {
						$('.slide_container li').each(function(i) {
							if($(this).hasClass('tap_active')) {
								var index = i + 1;
								if(index < 2) {
									/*$('.slide_container li').removeClass('tap_active');
									 $('.slide_container li:nth-of-type(3)').addClass('tap_active');
									 return false;*/
								} else {
									$('.slide_container li').removeClass('tap_active');
									$('.slide_container li:nth-of-type(' + (index - 1) + ')').addClass('tap_active');
									$('.slide_container li:nth-of-type(' + (index - 1) + ') input').focus();
									return false;
								}
							}
						})
					}
				});
			}
			tap_change();
		</script>
	</body>

</html>